import React, { Component } from 'react'
// 引入connect 用于连接UI组件与redux
import {connect} from 'react-redux'
// 引入创建 action 的 方法
import {increment,decrement,incrementAsync} from '../../redux/actions/count'

class CountUI extends Component {
    state={
        carName:'s'
    }

    jia = () =>{
        let {value} = this.selectnumber
        this.props.increment(value*1)

    }
    jian = () =>{
        let {value} = this.selectnumber
        this.props.decrement(value*1)
    }
    jia_odd = () =>{
        let {value} = this.selectnumber
        if(this.props.count % 2 !=1){
            this.props.increment(value*1)
        }
    }

    jia_sync = () =>{
        let {value} = this.selectnumber
        this.props.incrementAsync(value*1,500)
    }


    render() {
        return (
            <div>
                <h2>我是Count组件</h2>
                <h4>当前求和是:{this.props.count},person组件的人数{this.props.person_count}</h4>
                <select ref={c => this.selectnumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button  onClick={this.jia}>加</button>&nbsp;
                <button onClick={this.jian}>减</button>&nbsp;
                <button onClick={this.jia_odd}>当前结果是偶数再加</button>&nbsp;
                <button onClick={this.jia_sync}>异步加</button>&nbsp;
            </div>
        )
    }
}

// 使用connect()()创建并暴露 一个Count的容器组件
export default connect(
    state => ({
        count:state.count,
        person_count:state.persons.length
    }),
    {
        increment,
        decrement,
        incrementAsync,
    } 
)(CountUI)